<template>
  <div class="main">
    <img
      class="pre icon thumb"
      @click.stop="pre"
      v-lazy="publicUrl('/images/prev1.png')"
      alt=""
    />
    <div
      class="part thumb"
      v-for="item in dataSource"
      :style="{ width: partWidth + '%' }"
      @click="go"
    >
      <div class="s-img"><img v-lazy="item.img" alt="" /></div>
      <div class="bottom">
        <div class="s-tag overTwo">
          <p>{{ item.title }}</p>
        </div>
        <div class="s-price">
          <p>{{ item.price }}</p>
        </div>
      </div>
    </div>

   <div    :style="{ width: partWidth + '%' }" v-for="index of complete">

   </div>



    <img
      class="next icon thumb"
      @click.stop="next"
      v-lazy="publicUrl('/images/next1.png')"
      alt=""
    />
  </div>
</template>
<script setup lang="ts" name="">
import { publicUrl,surplusDiv } from "@/utils/util";
import {useRouter} from "vue-router";
import {computed} from "vue";
interface Props {
  dataSource: Array<{
    img: string;        //商品图片
    title: string;      //商品标题
    price: string;      //商品价格
  }>;
  partWidth: number;    //每一个商品的百分比
}
const props = withDefaults(defineProps<Props>(), {
  dataSource: () => [],
  partWidth: 31.5,
});

const complete = computed((): number => {
  return  surplusDiv(Object.keys(props.dataSource).length, Math.floor(100 / props.partWidth))
});

const emits = defineEmits<{
  (event: "pre"): void;
  (event: "next"): void;
}>();

const router = useRouter();

const pre = () => {
  emits("pre");
};
const next = () => {
  emits("next");
};

const go = () => {
  router.push({path:'/mtm/index/make'})
};



</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
